<template lang="pug">
    div(class="tree-hole-login")
        Logo(class="tree-hole-logo")
        div(class="tree-hole-welcome")
            div(class="line-1") 欢迎使用
            div(class="line-2") 树洞.健蓓医疗
        div(class="tree-hole-lines")
            div(class="line-1")
            div(class="line-2")
            div(class="line-3")
        div(class="tree-hole-description")
            //- span The happiest application in the world!
            Progress(:percent="99" status="active")
                span &nbsp;
</template>

<script>
    import Logo from "./logo";
    import axios from "@/plugin/axios";
    import util from "@/lib/util";
    import dayjs from "dayjs";

    export default {
        components: {Logo},
        methods: {
            wxAuthorizition: function (wxInfo) {
                location.href = wxInfo.authorizeUrl;
            },
            tokenLogin: function () {
                const authArgs = this.getAuthArgs();
                const options = {url: "token/weixin", data: authArgs, method: "post"};

                var vm = this;
                axios(options)
                    .then(tokenInfo => {
                        const expiredAt = dayjs().add(tokenInfo.expires - 1, "minute"); // 过期时间
                        util.cookies.set("expired", expiredAt.toISOString());
                        util.cookies.set("token", tokenInfo.token);
                        util.cookies.set("wxuid", tokenInfo.user.id);
                        util.cookies.set("avatar", tokenInfo.user.avatar);
                        util.cookies.set("nickname", tokenInfo.user.nickname);

                        // 替换URL参数 只需要pathname和hash 不需要search部分
                        // history.replaceState({}, {}, `${location.pathname}${location.hash}`);
                        setTimeout(
                            function () {
                                this.$router.replace(vm.$route.query.redirect || "/");
                            }.bind(this),
                            1500
                        ); // 3秒后跳转
                    })
                    .catch(() => {
                        // todo: code过期等情况处理
                    });
            },
            /**
             * 获取URL上的授权参数
             */
            getAuthArgs() {
                const code = util.getQueryString("code");
                const state = util.getQueryString("state");
                return {code, state};
            },
            // 跳转到url
            redirectWxAuth() {
                const prefix = process.env.NODE_ENV !== "development" ? "/" : "/api/";
                const callback_url = encodeURIComponent(location.href);
                location.href = `${prefix}weixinAuth/?callback_url=${callback_url}`;
            }
        },
        created: function () {
            const code = util.getQueryString("code");
            const state = util.getQueryString("state");
            // code和state有值则表示在授权回调
            var next = code && state ? this.tokenLogin : this.redirectWxAuth;
            next();
        }
    };
</script>

<style lang="less" scoped>
    .tree-hole-login {
        background-color: white;
        height: 100vh;
        display: flow-root;
    }

    .tree-hole {
        &-logo {
            margin: 0 auto;
            margin-top: 101px;
        }

        &-welcome {
            width: 120px;
            height: 30px;
            margin: 0 auto;
            text-align: center;
            margin-top: 30px;

            .line-1 {
                font-size: 10px;
            }

            .line-2 {
                font-size: 18px;
            }
        }

        &-lines {
            width: 50px;
            margin: 0 auto;
            margin-top: 15px; /** 6px + line-1的4px = 10px*/

            .line-1,
            .line-2,
            .line-3 {
                margin-top: 4px;
                height: 2px;
            }

            .line-1 {
                background: linear-gradient(0deg,
                rgba(0, 0, 0, 0.5),
                rgba(255, 255, 255, 0.5));
            }

            .line-2 {
                background: rgba(255, 63, 62, 0.75);
            }

            .line-3 {
                background: rgba(255, 63, 62, 0.25);
            }
        }

        &-description {
            margin: 0 auto;
            width: 197px;
            height: 10px;
            padding-top: 15px;

            font-size: 10px;
            font-family: HelveticaNeueLTStd-Lt;
            font-weight: normal;
            text-align: center;

            color: rgba(151, 151, 151, 1);
            line-height: 16px;
        }
    }
</style>
